Floating Boxes > Animating floating boxes
 		><

Animating floating boxes


To animate a floating box, you place keyframes in the TimeLine Editor. Each keyframe is associated with a position relative to the upper left corner of the document window. This position represents the location of the floating box at a particular time while the animation plays back. You adjust the position by dragging the floating box to the desired location. You can select the shape of the animation path in the Floating Box Inspector.

Instead of inserting keyframes one by one and specifying their positions, you can also record an animation path by pressing the Record button and moving a floating box on your page.

To insert a new keyframe:

1 Select the floating box in the document window by clicking its outline, its small yellow marker, or its name in the Floating Boxes palette.

2 Open the TimeLine Editor by clicking the TimeLine Editor button() above the main content area of the document window. Initially, the TimeLine Editor window contains only one time track with a single keyframe.

3 Ctrl-click (Windows) or Command-click (Mac OS) at the desired position on the time track to insert a new keyframe. You can also Alt-click (Windows) or Option-click (Mac OS) an existing keyframe and drag to the desired position on the time track to create a new keyframe.

A.The left and right locators mark the beginning and the end of the play range. B. Alt-click (Windows) or Option-click (Mac OS) the first keyframe, and then drag to the desired position to create a new keyframe. C. The counter indicates the position of the keyframe in seconds and frames. D. The Time cursor follows as you drag, stopping at the position where you drop the new keyframe.

The new keyframe marks the end of the play range. This is indicated by the right play range locator (), which follows as you drag the keyframe. If you insert more keyframes, the keyframe farthest to the right always limits the play range.

To specify the position of the floating box for a keyframe:

1 Go to the document window and drag the floating box to the position where you want it to appear for the keyframe. You can also enter the desired position in the Left and Top text boxes of the Floating Box Inspector.

2 Click the first keyframe () to return the floating box to its start position. (You can also change its position as described in step 1.)

3 Click the Play button () at the bottom of the TimeLine Editor to preview your animation. The floating box travels across the document window and stops where you set the last keyframe.

4 The time cursor also stops at the right play range locator (). Click the Stop button () to reset the time cursor to the beginning of the play range, or use the Backward button () to return the time cursor.

5 If desired, use the Loop and Palindrome buttons in the lower left corner of the TimeLine Editor window to control the looping behavior:
  • The Loop button () plays your animation in a simple endless loop. When it reaches the end point of the animation path, the floating box jumps back to the start and resumes traveling, repeating this cycle indefinitely.
  • The Palindrome button () causes the floating box to bounce back and forth between the start and end points of the animation path. (The Loop button must be active to activate the Palindrome button.)

    • 6 To change the playback speed, select another option from the FPS menu at the bottom of the TimeLine Editor. Most browsers can handle the default 15 FPS setting, even if running on systems with average video hardware. If you want to work with higher speeds, be sure to test your animation with a wide selection of system configurations to make sure that playback is smooth.

    You can quickly add a keyframe between two existing keyframes and set the floating box's position for the frame. In the TimeLine Editor, drag the time cursor to the position in the TimeLine where you want to insert the new keyframe. The floating box moves to that position in the path. Alt-click (Windows) or Option- click (Mac OS) the edge of the floating box and then drag it to a new position.

    To specify the shape of the animation path:

    1 Ctrl-click (Windows) or Command-click (Mac OS) in the Timeline Editor to set the ending position of an animation path by adding a new keyframe in the TimeLine. Then move the floating box into position for the keyframe.

    2 Ctrl-click (Windows) or Command-click (Mac OS) in the TimeLine Editor to insert a new keyframe between the two existing keyframes.

    3 Click the middle keyframe to select it, and then drag the floating box to the position where you want it to appear.


    A. End point of animation as marked by the keyframe at 30 seconds B. Starting point of animation C. Shows position of selected keyframe D. Selected keyframe inserted at 15 divides the animation into two sections E. Shape option specifies the shape of the animation

    4 To alter the shape of the path between a keyframe and the next keyframe, select a keyframe and then choose a shape option from the Animation menu in the Floating Box Inspector. Linear is the default path shape, Curve creates a smooth curve between keyframes, and None makes the floating box jump between the keyframes.

    To select multiple keyframes, Shift-click them, drag around them, or choose Edit > Select All; then apply a common setting, such as a curved animation path.

    5 Click the Play button () in the TimeLine Editor to preview your animation.

    To record an animation path:

    1 Open the TimeLine Editor, and begin with the initial keyframe.

    2 Click the Record button () in the Floating Box Inspector.

    3 In the document window, drag the floating box along the desired path. A keyframe appears at each major turn in the path.

    4 Click each keyframe and correct the position if necessary.

    Floating Boxes > Animating floating boxes